{% extends 'base.html' %}
{% block title %}Join more constituencies{% endblock %}

{% block content %}
<h2>Progress on recruitment</h2>
<p>We're trying to get at least one volunteer in each constituency.  Ideally, we'd have at least three in each constituency, as this will really help collaboration.  You can see how we're doing in these visualisations.</p>
<div id="no-volunteers" class="span-4">
<h3>Constituencies with no volunteers</h3>
 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=http:%2F%2Fwww.democracyclub.org.uk%2Fstatistics%2Ffewerthan%2F1%2Fgeo.rss&amp;sll=53.800651,-4.064941&amp;sspn=16.261859,33.618164&amp;ie=UTF8&amp;ll=54.521081,-3.120117&amp;spn=8.935775,18.676758&amp;z=5&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=http:%2F%2Fwww.democracyclub.org.uk%2Fstatistics%2Ffewerthan%2F1%2Fgeo.rss&amp;sll=53.800651,-4.064941&amp;sspn=16.261859,33.618164&amp;ie=UTF8&amp;ll=54.521081,-3.120117&amp;spn=8.935775,18.676758&amp;z=5" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
<div id="many-volunteers" class="span-4 last">
<h3>Constituency heatmap</h3>
 <img src="/media/images/heatmap.png" width="300" />
 <p>On this map, the redder the constituency, the more volunteers we have there.</p>
</div>
<hr />
<h3>Successful signups over time</h3>

<div id="signupchart" class="span-8">Chart goes here</div>

<h3>Constituency membership</h3>

<div id="membershipchart" class="span-8">Chart goes here</div>
{% endblock %}

{% block js %}
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
 <script type='text/javascript'>
   google.load('visualization', '1', {packages:['imagelinechart', 'imagebarchart']});
   google.setOnLoadCallback(drawCharts);
   function drawSignupChart() {
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Date');
     data.addColumn('number', 'Signups');
     data.addRows({{ histogram.rowcount }});
    {% for row in histogram.fetchall %}
     data.setValue({{ forloop.counter0 }}, 0, '{% if forloop.counter0|divisibleby:categorystep %}{{ row.0 }}{% endif %}');
     data.setValue({{ forloop.counter0 }}, 1, {{ row.1 }});
    {% endfor %}
     var chart = new google.visualization.ImageLineChart(document.getElementById('signupchart'));
     chart.draw(data, {width: 800, height: 240, min: 0});
   }
   
   function drawMembershipChart() {
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Volunteers in constituency');
     data.addColumn('number', 'Number of constituencies');
     data.addRows({{ const_volunteers|length }});
    {% for key,val in const_volunteers.items %}
     data.setValue({{ forloop.counter0 }}, 0, '{{ key }}');
     data.setValue({{ forloop.counter0 }}, 1, {{ val }});
    {% endfor %}
     var chart = new google.visualization.ImageBarChart(document.getElementById('membershipchart'));
     chart.draw(data, {width: 800, height: 240, min: 0, isVertical: true});
   }

   function drawCharts() {
       drawSignupChart();
       drawMembershipChart();
   }
 </script>

{% endblock %}
